<template>
	<div style="width: 100%">
		<video
			:src="FieldItem?.videoUrl"
			:style="{
				width: FieldItem?.attrs.width.number + FieldItem?.attrs.width.unit,
				height: FieldItem?.attrs.height.number + FieldItem?.attrs.height.unit,
			}"
			:controls="FieldItem?.attrs.controls"
			autoplay
		></video>
	</div>
</template>

<script setup lang="ts">
// 视频组件
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';

const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		pageData?: Record<string, any>;
		inputData: Record<string, any>;
		globalData?: Record<string, any>;
		FieldItem: TabFieldType | null;
	}>(),
	{
		FieldItem: null,
	}
);
const { FieldItem, pageData } = toRefs(props);
onBeforeMount(() => {
	init();
});
const init = () => {
	// 如果组件绑定的变量存在
	if (FieldItem.value?.vModel) {
		const videoUrl = pageData?.value![FieldItem.value?.vModel];
		let newVideoUrl = '';
		console.log('video', videoUrl);
		// 截取需要的路径
		if (videoUrl.indexOf(':=') !== -1) {
			newVideoUrl = videoUrl.split(':=')[1];
		} else if (videoUrl[0] === '/') {
			newVideoUrl = FieldItem.value?.urlPrefix + videoUrl;
		}
		// 赋值
		FieldItem.value!.videoUrl = newVideoUrl;
	}
};
</script>

<style lang="scss" scoped></style>
